import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Toast, SubmitBar, Checkbox, SwipeCell, Button , Flex, Image, Typography, Empty } from 'react-vant'
import { CARLIST, CHECKED, CATRDELETE, UPDATE } from '../../axios'
import './car.css'
export default function Car() {
  const [cartList, setcartList] = useState([])
  const [cartTotal, setCartTotal] = useState({})
  const navigate = useNavigate()
  useEffect(() => {
    if (localStorage.getItem('token')) {
      console.log('登陆了');
      getCarList()
    } else {
      Toast.success('请先登录')
      navigate('/my')
    }

  }, [])
  const getCarList = () => {
    CARLIST().then(res => {
      console.log(res);
      setcartList(res.data.data.cartList)
      setCartTotal(res.data.data.cartTotal)
    })
  }
  const changeChecked = (data) => {
    CHECKED(data).then(res => {
        console.log(res);
        getCarList()
      })
  }
  const change = (data) => {
    let isChecked = 1
    if(data.chek === 1){
      isChecked = 0
    }else{
      isChecked = 1
    }
    // console.log(data);
    changeChecked({isChecked,productIds:data.id})
  }
  const changeAll = (v) => {
    // console.log(v);
    let isChecked = 1
    if(v){
      isChecked = 1
    }else{
      isChecked = 0
    }
    let productIds = cartList.map(item => item.product_id).join(',')
    console.log(productIds);
    changeChecked({isChecked,productIds})
  }
  const del = (productIds) => {
    productIds = String(productIds)
    CATRDELETE({productIds}).then(res => {
      console.log(res);
      getCarList()
    })
  }
  const rem = (data) => {
    data.number--
    if(data.number < 1 ){
      data.number = 1
    }
    console.log(data);
    UPDATE(data).then(res => {
      console.log(res);
      getCarList()
    })
  }
  const add = (data) => {
    data.number++
    console.log(data.number);
    UPDATE(data).then(res => {
      console.log(res);
      getCarList()
    })
  }
  return (
    <div className='car-box'>
      {cartList.length === 0 && <Empty description="购物车还没有商品">
        <Button style={{ width: 160 }} round type="primary" onClick={() => navigate('/home')}>
          去购物
        </Button>
      </Empty>}
      {cartList.length > 0 && <div>
        {
        cartList.map(item => {
          return <div className='car-div'
            key={item.id}> 
            <Checkbox checked={item.checked} onChange={() => change({chek:item.checked,id:item.product_id})}>
            </Checkbox>
            <SwipeCell
            className='demo-box'
            rightAction={
              <Button style={{ height: '100%' }} square type="danger" onClick={() => del(item.product_id)}>
                删除
              </Button>
            }
          >
            <Flex className="demo-product-card" align="stretch">
              <Image src={item.list_pic_url} className="demo-product-card__img" />
              <Flex direction="column" justify="between" className="demo-product-card__content">
                <div>
                  <Typography.Title level={5}>{item.goods_name}</Typography.Title>
                </div>
                <Flex justify="between" align="center">
                  <Typography.Text strong size="lg">
                    ¥{item.retail_price}.00
                  </Typography.Text>
                  <Typography.Text size="sm" type="secondary">
                    <button className='cart-btn' onClick={() => rem({goodsId:item.goods_id,number:item.number,productId:item.product_id,id:item.id})}>-</button>
                    ×{item.number}
                    <button className='cart-btn' onClick={() => add({goodsId:item.goods_id,number:item.number,productId:item.product_id,id:item.id})}>+</button>
                  </Typography.Text>
                </Flex>
              </Flex>
            </Flex>
            </SwipeCell>
          </div>
        })
      }
      
      </div>}
      <SubmitBar
        price={cartTotal.checkedGoodsAmount+'00'}
        buttonText="提交订单"
        onSubmit={() => console.log(1)}
        tip={
          <>
            你的收货地址不支持同城送,
            <span style={{ color: '#1989fa' }}>修改地址</span>
          </>
        }
      >
        <Checkbox checked={cartTotal.goodsCount === cartTotal.checkedGoodsCount} onChange={(v)=>changeAll(v)}>全选</Checkbox>
      </SubmitBar>
    </div>
  )
}
